<template>
  <div class="contact-page">

    <!-- 顶部 Banner -->
    <div class="top-image fullscreen-top">
      <div class="breadcrumb-inside">
        当前位置：<a href="/">首页</a> &gt; <a href="#">联系我们</a>
      </div>
    </div>

    <!-- 导航标题栏 -->
    <div class="list">
      <div class="item">
        <span class="item-text">联系我们</span>
        <img src="@/assets/images/t-bg.png" alt="" class="item-icon" />
      </div>
    </div>

    <!-- 主体内容 -->
    <div class="main-content" v-if="centerInfo">
      <!-- 左侧信息 -->
      <div class="left-panel">
        <h2 class="page-title">{{ centerInfo.fullName }}</h2>

        <div class="info-item"><span class="label">邮编：</span><span class="value">{{ centerInfo.postalCode }}</span></div>
        <div class="info-item"><span class="label">成立时间：</span><span class="value">{{ centerInfo.establishedDate }}</span></div>
        <div class="info-item"><span class="label">地址：</span><span class="value">{{ centerInfo.address }}</span></div>
        <div class="info-item"><span class="label">联系人：</span><span class="value">{{ contactDetail.contactPerson }}</span></div>
        <div class="info-item"><span class="label">电话：</span><span class="value">{{ contactDetail.phone }}</span></div>
        <div class="info-item"><span class="label">传真：</span><span class="value">{{ contactDetail.fax }}</span></div>
        <div class="info-item"><span class="label">邮箱：</span><span class="value">{{ contactDetail.email }}</span></div>
      </div>

      <!-- 右侧地图 -->
      <div class="map-panel" ref="mapContainer"></div>
    </div>

    <div v-else class="loading">加载中...</div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { listPublicCenter } from '@/api/contactSys/contactBasic'

// 中心信息与联系方式
const centerInfo = ref(null)
const contactDetail = ref({
  contactPerson: '',
  phone: '',
  fax: '',
  email: ''
})

// 解析“联系人|电话|邮箱”等文本格式
const parseContactInfo = (str) => {
  if (!str) return {}
  const d = {}
  str.split('|').forEach(s => {
    const [k, v] = s.split('：').map(x => x.trim())
    if (k.includes('联系人')) d.contactPerson = v
    if (k.includes('电话')) d.phone = v
    if (k.includes('传真')) d.fax = v
    if (k.includes('邮箱')) d.email = v
  })
  return d
}

// 地图逻辑
const mapContainer = ref(null)
let mapInstance = null

const createMap = () => {
  if (!window.AMap) {
    console.error('AMap 未定义，请检查高德地图脚本是否加载成功。')
    return
  }
  mapInstance = new AMap.Map(mapContainer.value, {
    zoom: 16,
    center: [108.946233, 34.226621],
    resizeEnable: true
  })

  const marker = new AMap.Marker({
    position: [108.946233, 34.226621],
    title: centerInfo.value?.fullName || '中心位置'
  })
  mapInstance.add(marker)

  const infoWindow = new AMap.InfoWindow({
    content: `<div style="font-size:14px;color:#333;">
      <b>${centerInfo.value?.fullName || '旅游服务智能辅助与质量评价中心'}</b><br/>
      地址：${centerInfo.value?.address || '陕西省西安市碑林区'}<br/>
      电话：${contactDetail.value.phone || '-'}
    </div>`,
    offset: new AMap.Pixel(0, -30)
  })
  marker.on('click', () => infoWindow.open(mapInstance, marker.getPosition()))

  AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], () => {
    mapInstance.addControl(new AMap.ToolBar())
    mapInstance.addControl(new AMap.Scale())
  })
}

const initMap = () => {
  if (window.AMap) {
    createMap()
    return
  }

  const script = document.createElement('script')
  script.src = 'https://webapi.amap.com/maps?v=2.0&key=6bce92ebf8169192c97fdaa7987a9405'
  script.async = true
  script.onload = createMap
  script.onerror = () => {
    ElMessage.error('高德地图加载失败，请检查网络或密钥。')
  }
  document.head.appendChild(script)
}

onMounted(async () => {
  try {
    const res = await listPublicCenter({ pageNum: 1, pageSize: 1 })
    const data = res.data
    if (data?.rows?.length > 0) {
      centerInfo.value = data.rows[0]
      contactDetail.value = parseContactInfo(centerInfo.value.contactInfo)
    } else {
      ElMessage.warning('没有中心信息')
    }

    // ✅ 确保 DOM 已更新（mapContainer 存在）后再初始化地图
    await nextTick()
    initMap()
  } catch (e) {
    console.error(e)
    ElMessage.error('接口请求失败')
  }
})
</script>

<style scoped>
/* 顶部 Banner */
.top-image {
  width: 100%;
  height: 250px;
  background-image: url("@/assets/images/support-bg.jpg");
  background-size: cover;
  background-position: center top;
  position: relative;
}
.breadcrumb-inside {
  position: absolute;
  bottom: 12px;
  right: 40px;
  font-size: 14px;
  color: white;
  text-shadow: 0 0 4px rgba(0,0,0,0.5);
}
.breadcrumb-inside a { color: #fff; }

/* 导航标题栏 */
.list {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}
.list::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -20px;
  width: 100%;
  height: 90px;
  background-color: #eae4e4;
  z-index: 0;
}
.item {
  position: relative;
  display: inline-block;
  margin-top: -30px;
  z-index: 2;
}
.item-icon {
  display: block;
  position: relative;
  z-index: 1;
}
.item-text {
  position: absolute;
  left: 50%;
  top: 25%;
  transform: translateX(-50%);
  font-size: 32px;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  z-index: 2;
}

/* 主体布局 */
.main-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 60px 80px;
  gap: 60px;
  box-sizing: border-box;
}

/* 左侧信息 */
.left-panel {
  flex: 1;
  max-width: 45%;
}
.page-title {
  font-size: 26px;
  font-weight: 700;
  color: #a00;
  margin-bottom: 30px;
}
.info-item {
  font-size: 18px;
  margin-bottom: 16px;
  display: flex;
}
.label {
  min-width: 100px;
  color: #a00;
  font-weight: 600;
}
.value {
  color: #333;
  flex: 1;
}

/* 右侧地图 */
.map-panel {
  flex: 1;
  min-height: 500px;
  border-radius: 12px;
  box-shadow: 0 0 12px rgba(0,0,0,0.15);
  overflow: hidden;
}

/* 加载提示 */
.loading {
  text-align: center;
  padding: 80px;
  font-size: 18px;
  color: #666;
}
</style>
